import { Card, Col, Row } from 'antd'
import './index.less'
import { ShopOutlined } from '@ant-design/icons'
import React from 'react'
import { createGradient } from '../_utils/color'
interface ItemsProps {
    label: React.ReactNode
    value: React.ReactNode
}
interface CardPanelProps {
    items: ItemsProps[]
    bgImage?: React.ReactNode
    extra?: React.ReactNode
    title?: React.ReactNode
    labelWidth?:string|number
    style?: React.CSSProperties;
    color?:string
}
const CardPanel = ({style,color='green', items,title,labelWidth, extra,bgImage }: CardPanelProps) => {
   const colors =  createGradient(color)

    return <Card
         style={{...style,
           background:`linear-gradient(to bottom, ${colors[3]} 0%, ${colors[2]} 50%, ${colors[1]} 100%)`
        }}
        extra={extra}
        title={title}
        size='small' bordered={false} className="card-panel-container">
        <div style={{ position: 'relative', zIndex: 2 }}>
            {items.map((item, index) => {
                return <div className='card-panel-item' key={index}>
                    <div className='card-panel-label' style={{width:labelWidth}}>
                        {item.label}:
                    </div>
                    <div>
                        {item.value}
                    </div>
                </div>

            })}
        </div>

        <div className='card-panel-bg' >
            {bgImage}
        </div>
    </Card>
}
export default CardPanel